<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 对不识别viewport设备优化 -->
    <meta name="HandheldFriendly" content="true">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <title>商品详情 | 商超世界</title>
    <link rel="icon" type="image/x-icon" href="./favicon.ico" />
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper.min.css" />
    <link rel="stylesheet" href="./css/toast.css">
    <link rel="stylesheet" href="css/product.css">
    <style>
        .swiper-pagination-fraction {
            text-align: right;
            padding: 0 .2rem .1rem 0;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 顶部 -->
        <div class="header">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="share">
                <img src="./images/fenxiang.png">
            </div>
        </div>

        <!-- 商品详情页面 -->
        <div class="main"></div>

        <!-- 底部 -->
        <div class="foot">
            <a class="service">
                <img src="./images/kefu.png" alt="">
                <p>客服</p>
            </a>
            <input type="button" class="purchase" value="立即购买">
        </div>
    </div>
    <!-- 规格选择 -->
    <div class="specificate">

        <!-- 商品图片库存信息 -->
        <div class="infor">
            <div class="smallImg">
                <img>
            </div>
            <div class="goodsInfor">
                <p class="goodsPrice">￥50</p>
                <p class="goodsStorage">
                    库存
                    <i>333</i>件
                </p>
                <span>选择数量</span>
            </div>
        </div>

        <div class="close">
            <img src="./images/close.png">
        </div>
        <!-- 选择数量 -->
        <div class="choiceNum">
            <p>购买数量</p>
            <div class="operate">
                <input type="button" class="minus">
                <span class="num">1</span>
                <input type="button" class="add">
            </div>
        </div>

        <!-- 立即购买 -->
        <a class="payment">
            <input type="button" value="立即购买">
        </a>
    </div>
    <!-- 分享微信 微信好友 qq  qq好友 -->
    <div class="shareLinks">
        <p class="shareTop">分享</p>
        <div class="social-share share-component" id="shareMiddle" data-initialized="true" unselectable="on" data-description="lallllaalalallaalla">
            <ul>
                <li>
                    <a href="#" class="social-share-icon icon-wechat" target="_blank">
                        <!-- <img src="images/wx.png" alt=""> -->

                    </a>
                    <p>微信好友</p>
                </li>
                <li>
                    <a href="#" class="social-share-icon icon-wechat" target="_blank">
                        <!-- <img src="images/wxFriend.png" alt=""> -->

                    </a>
                    <p>微信朋友圈</p>
                </li>
                <li>
                    <a data-qq-title="分享到QQ时用此标题" href="http://connect.qq.com/widget/shareqq/index.html?url=http://www.yongbo.xin&title=李佳俊小狗娃&source=网往往娃娃那个&desc=李佳俊小狗娃，叽叽哇哇"
                        class="social-share-icon icon-qq" target="_blank">
                        <!-- <img src="images/qq.png" alt=""> -->
                    </a>
                    <p>qq好友</p>
                </li>
                <li>
                    <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://www.yongbo.xin&title=哈哈哈啊哈哈哈&desc=风景哦啊见佛怕卷发将双方军嫂佛教&summary=让我亲热完全让我确认为亲人前往&"
                        class="social-share-icon icon-qzone" target="_blank">
                        <!-- <img src="images/qqFriend.png" alt=""> -->
                    </a>
                    <p>qq朋友圈</p>
                </li>
            </ul>
        </div>
        <div class="shareBottom">
            <a href="javascript:;">取消</a>
        </div>
    </div>
</body>
<script src="./js/rem.js"></script>
<script src="./js/jquery1.7.2.js"></script>
<script src="./js/swiper.jquery.min.js"></script>
<script src="./js/jquery.cookie.js"></script>
<script src="./js/toast.js"></script>
<script src="./js/template-web.js"></script>
<script type="text/html" id="goodsDetail">
    <div class="good-top">
        <p>{{goodsDetail.goodsName}}</p>
        <i>￥{{goodsDetail.goodsPrice}}</i>
    </div>
    <div class="mess">
        <div class="m-top">
            <li>
                <span class="fl">品牌</span>
                <i class="fr">{{goodsDetail.brandName}}</i>
            </li>
            <li>
                <span class="fl">产地</span>
                <i class="fr">{{goodsDetail.goodsPlace}}</i>
            </li>
        </div>
        <div class="m-bottom">
            <span>运&nbsp;&nbsp;&nbsp;费:</span>
            <i>￥{{goodsDetail.expFee}}</i>
            <em class="fr">已成交{{goodsDetail.goodsSalenum}}件</em>
        </div>
    </div>
    <!-- 图文详情 -->
    <div class="image-text">
        <div class="scsj-top">
            <span>评价</span>
            <i>({{evaluate.evaluateCount}})</i>
            {{if evaluate!=""}}
            <a href="./comment.html?storeId={{goodsDetail.storeId}}" class="fr">查看全部评价</a>
            {{/if}}
        </div>
        <!-- 评价 -->
        {{if evaluate}}
        <div class="scsj-assess">
            <div class="photo">
                {{if evaluate.userAvatar}} 
                <img src="{{evaluate.userAvatar}}" class="ff fl"> 
                {{else}}
                <img src="./images/defaultPhoto.png" class="ff fl">
                {{/if}}
                {{if evaluate.userName}}
                <span class="fl">{{evaluate.userName}}</span>
                {{else}}
                <span class="fl">匿名</span>
                {{/if}}
                <a class="mmm fl">
                    <img src='./images/star_default.png' alt=''>
                    <img src='./images/star_default.png' alt=''>
                    <img src='./images/star_default.png' alt=''>
                    <img src='./images/star_default.png' alt=''>
                    <img src='./images/star_default.png' alt=''>
                </a>
            </div>
            <div class="p-list">
                <p>{{evaluate.geval_content}}</p>
                
                {{if evaluate.gevalImage}}
                <div style="text-align:center">
                    <img src="{{evaluate.gevalImage}}" alt=""> 
                </div>
                {{/if}}
            </div>
        </div>
        {{else}}
        <div style="padding: 0.2rem;color:#D68B84;">该商品暂无评价</div>
        {{/if}}
    </div>
    <!-- 图文详情带图片的那种 -->
    <div class="text-image">
        <h2>图文详情</h2>
    </div>
</script>
<script src="./js/product.js"></script>

</html>